<script setup>
import { computed, nextTick, onMounted, reactive, ref, watchEffect } from 'vue';
import data from "@/untils/address/states.json"
const formLabelWidth = '100px'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { Decrypt, Encrypt } from '../../untils/passjs/security';
import { getSupplierdataChu, getChuListDeviceApi,inventoryOutboundDis, equipmentType, AddInventory, getRoledata, updateInventory, getRoledataList } from '../../api/api';
let formRef = ref(null)
let props = defineProps({
    ChudialogFormVisible: Boolean,

})
let total = ref(0)
let page = ref(1)
let pageSize = ref(5)
watchEffect(() => {
    if (props.ChudialogFormVisible) {
        getChukuSupplier()
    }
})
onMounted(() => {

})
async function getChukuSupplier() {
    let res = await getSupplierdataChu(page.value, pageSize.value, 3)
    if (res.code == 200) {
        total.value = res.total
        ChuList.value = res.rows
    }
}
let emits = defineEmits(["closeChu"])
function closedialog(formEl) {
    // // 再次点击清空inp的值
    if (!formEl) return
    // formEl.resetFields()
    // // // 向父组件发送自定义事件
    emits("closeChu")
    selectRadio.value = null
    page.value = 1
    stepnum.value = 1
}
let roleOptions = ref([])
function colseclose(formRef) {
    emits("closeChu")
    selectRadio.value = null
    page.value = 1
    stepnum.value = 1
    pageDevice.value = 1
    // closedialog(formRef)
    // if(props.dialogFormVisible){
    // roleOptions.value =[]
    // }
}
async function getCurrentPage(e) {
    page.value = e
}
let ChuList = ref([])
let selectRadio = ref(null)
function nextHandler() {
    if (stepnum.value == 1) {
        if (selectRadio.value == null) {
            ElMessage.error("Please select distributor user");
            return
        }
        console.log(selectRadio.value);
        stepnum.value = 2
    }
    if (stepnum.value == 2) {
        getChuListDevice()
    }

}
async function handleOutbound() {

    console.log(selectRadio.value, "111");

    console.log(ids.value, "222");
    if (ids.value.length == 0) {
        ElMessage.warning("Please select the equipment to be shipped out");
        return; 
    }
    let requestData = {
        agentUserId: selectRadio.value,
        equipmentIds: ids.value
    }
    console.log(requestData);

    let res = await inventoryOutboundDis(requestData)
    console.log(res)
    if (res.code == 200) {
        ElMessage.success(res.msg)
        colseclose()
    };
}
let stepnum = ref(1)
let ChuListDevice = ref([])
let totalDevice = ref(0)
let pageDevice = ref(1)
let pageSizeDevice = ref(5)
let tableRef = ref(null)
async function getChuListDevice() {
    let res = await getChuListDeviceApi(pageDevice.value, pageSizeDevice.value, 1);
    console.log(res);
    if (res.code == 200) {
        ChuListDevice.value = res.rows
        totalDevice.value = res.total
    }
}
function getCurrentPageDevice(e) {
    console.log(e);
    pageDevice.value = e
    getChuListDevice()
}
const ids = ref([])
const rowSelectChange = (selection, row) => {
    // 判断是否选中,选中ids增加，取消选中ids删除
    if (selection.filter(item => item.equipmentId == row.equipmentId).length >= 1) {
        ids.value.push(row.equipmentId)
    } else {
        ids.value = ids.value.filter(item => item != row.equipmentId)
    }
}

const handleSelectionChange = (selection) => {
    ids.value = selection.map((item) => item.equipmentId);
}
function getRowKeys(row) {
    return row.equipmentId

}
</script>
<template>
    <div class="editclass">
        <el-dialog :model-value="ChudialogFormVisible" style="padding: 40px;width: 800px;" title="Outbound"
            @close="colseclose">
            <el-steps :active="stepnum" align-center>
                <el-step title="Step 1" />
                <el-step title="Step 2" />
                <el-step title="Step 3" />
            </el-steps>
            <template v-if="stepnum == 1">
                <el-table stripe :data="ChuList" style="width: 100%;margin-top: 20px;" :fit="true">
                    <el-table-column width="55">
                        <template #default="scope">
                            <el-radio-group v-model="selectRadio">
                                <el-radio :label="scope.row.userId" :value="scope.row.userId">{{ '' }}</el-radio>
                            </el-radio-group>

                        </template>
                    </el-table-column>
                    <el-table-column property="nickname" label="nickname" />
                    <el-table-column property="phone" label="cell-phone number" />
                    <el-table-column property="email" label="email" />
                    <el-table-column property="userLevel" label="level">
                        <template #default="scope">
                            <span>{{ {
                                6: 'T1', 7: 'T2', 8: 'T3', 9: 'T4',
                            }[scope.row.userLevel] }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="display: flex;justify-content: end;align-items: center; margin-top: 25px">
                    <el-pagination background layout="prev, pager, next" :page-count="Math.ceil(total / pageSize)"
                        style="text-align: end;" :current-page='page' @current-change="getCurrentPage" />
                </div>

            </template>
            <template v-if="stepnum == 2">
                <el-table stripe :data="ChuListDevice" :row-key="getRowKeys" style="width: 100%;margin-top: 20px;"
                    :fit="true" @select="rowSelectChange" @selection-change="handleSelectionChange" :ref="tableRef">
                    <el-table-column width="55" type="selection" :reserve-selection="true"></el-table-column>
                    <el-table-column property="equipmentName" label="name" />
                    <el-table-column property="equipmentNumber" label="code" />
                    <el-table-column property="equipmentModel" label="model" />
                    <el-table-column property="equipmentType" label="type">
                        <template #default="scope">
                            <span>{{ scope.row.equipmentType == 1 ? 'Battery' : 'WaterPump' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="storageTime" label="Storage time" />
                </el-table>
                <div style="display: flex;justify-content: end;align-items: center; margin-top: 25px">
                    <el-pagination background layout="prev, pager, next"
                        :page-count="Math.ceil(totalDevice / pageSizeDevice)" style="text-align: end;"
                        :current-page='pageDevice' @current-change="getCurrentPageDevice" />
                </div>
            </template>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="colseclose">cancel</el-button>
                    <el-button type="primary" @click="stepnum == 1 ? nextHandler() : handleOutbound()">
                        {{ stepnum == 1 ? 'next step' : 'Outbound' }}
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<style lang="scss" scoped>
.two-column-form .form-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.two-column-form .el-form-item {
    width: 45%;
}

.address-container {
    display: flex;
    align-items: center;
}

/* 调整表单标签宽度 */
.two-column-form :deep(.el-form-item__label) {
    width: 80px;
    text-align: right;
    padding-right: 12px;
}

/* 响应式设计 - 小屏幕时变为单列 */
@media (max-width: 768px) {
    .two-column-form .form-row {
        flex-direction: column;


        .el-form-item {
            width: 100%;
        }
    }

    .address-container {
        flex-direction: column;
        align-items: flex-start;

        .el-select {
            width: 100% !important;
            margin-right: 0 !important;
            margin-bottom: 10px;
        }
    }
}

.more-button {
    margin-left: 8px;
    margin-top: 3px;
    /* 为“更多”按钮添加左边距 */
    color: #409EFF;
    outline: none;

    /* Element Plus 主题色 */
    &:hover {
        color: #66b1ff;

        /* 鼠标悬停时的颜色 */
    }
}
</style>